<template>
  <view class="container" :style="appThemeStyle">
    <z-paging ref="paging" v-model="list" class="notice-list" @query="getlist">
      <view class="content-wrapper">
        <view class="order-list">
          <view class="order-item" v-for="(item, index) in list" :key="index">
            <view class="item-header">
              <view class="date-section">
                <text class="date">{{ item.date }}</text>
                <checkbox
                  :checked="selectedItems.includes(item)"
                  @tap.stop="selectItem(item)"
                  :disabled="isCheckboxDisabled(item)"
                  style="transform: scale(0.8)"
                />
              </view>
              <view class="metrics-grid">
                <view class="metric-card">
                  <view class="metric-label">体重</view>
                  <view class="metric-value">
                    <text class="number">{{ item.weight }}</text>
                    <text class="unit">kg</text>
                  </view>
                </view>
                <view class="metric-card">
                  <view class="metric-label">体脂</view>
                  <view class="metric-value">
                    <text class="number">{{ item.fat }}</text>
                    <text class="unit">%</text>
                  </view>
                </view>
                <view class="metric-card">
                  <view class="metric-label">腰围</view>
                  <view class="metric-value">
                    <text class="number">{{ item.waist }}</text>
                    <text class="unit">cm</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view 
          class="chart-area" 
          :class="{ 'chart-show': showChart }"
          v-show="showChart"
        >
          <view class="chart-title">数据对比</view>
          <view class="charts">
            <qiun-data-charts
              type="line"
              :opts="opts"
              :chartData="chartData"
              :canvas2d="true"
              canvasId="compareChart"
            />
          </view>
        </view>
      </view>

      <template #bottom>
        <view class="bottom-button-wrapper">
          <view class="f ac xb mb30r" style="padding: 30rpx">
            <view class="tc add mr20r" style="width: 50%" @click="addData">
              添加数据
            </view>
            <view
              class="tc choose"
              style="width: 50%"
              :class="{ disabled: selectedItems.length !== 2 }"
              @click="generateChart"
            >
              {{ showChart ? "隐藏对比图" : "生成对比图" }}
            </view>
          </view>
        </view>
      </template>
    </z-paging>
  </view>
</template>

<script>
import { fitness } from "../../api/fit";
export default {
  data() {
    return {
      keyword: "",
      list: [],
      selectedItems: [], // 存储选中的项目
      showChart: false, // 控制图表显示/隐藏
      id: "",
      opts: {
        color: ["#1890FF", "#91CB74", "#FAC858"],
        padding: [15, 15, 15, 15],
        enableScroll: false,
        legend: {
          show: true,
          position: "top",
          float: "center",
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
        },
        yAxis: {
          splitLine: true,
          axisLine: true,
          scale: true,
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow",
          },
        },
      },
      chartData: {
        categories: [],
        series: [],
      },
    };
  },
  onLoad(e) {
    console.log(e, "eeeeeeeeeeee");
    this.id = e.id;
  },
  methods: {
    // 选择项目
    selectItem(item) {
      const index = this.selectedItems.indexOf(item);
      if (index > -1) {
        // 取消选择
        this.selectedItems.splice(index, 1);
        // 如果取消选择后不足两项，隐藏图表
        if (this.selectedItems.length < 2) {
          this.showChart = false;
        }
      } else if (this.selectedItems.length < 2) {
        // 添加选择
        this.selectedItems.push(item);
      }
    },

    // 判断是否禁用选择框
    isCheckboxDisabled(item) {
      return (
        this.selectedItems.length >= 2 && !this.selectedItems.includes(item)
      );
    },

    // 生成对比图表
    generateChart() {
      if (this.selectedItems.length !== 2) {
        uni.showToast({
          title: "请选择两条记录进行对比",
          icon: "none",
        });
        return;
      }

      // 切换图表显示状态
      this.showChart = !this.showChart;

      if (this.showChart) {
        // 使用 recordDate 作为日期数据
        const dates = this.selectedItems.map((item) => item.recordDate);

        this.chartData = {
          categories: dates,
          series: [
            {
              name: "体重(kg)",
              data: this.selectedItems.map((item) => Number(item.weight) || 0),
            },
            {
              name: "体脂(%)",
              data: this.selectedItems.map((item) => Number(item.fat) || 0),
            },
            {
              name: "腰围(cm)",
              data: this.selectedItems.map((item) => Number(item.waist) || 0),
            },
          ],
        };

        // 显示图表时滚动到图表位置
        setTimeout(() => {
          uni.pageScrollTo({
            selector: ".chart-area",
            duration: 300,
          });
        }, 100);
      }
    },

    async getlist(pageNo, pageNum = 10) {
      // 模拟数据，实际项目中替换为真实的API调用

      let data = {
        page: pageNo,
        size: pageNum,
        recordDate: "",
      };
      const res = await fitness(data);
      this.$refs.paging.complete(res.data.list);
    },

    addData() {
      uni.navigateTo({
        url: `/pages/physical/data?id=${this.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.order-item {
  margin: 30rpx auto;
  padding: 30rpx;
  width: 92%;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1), 0 1rpx 8rpx rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-6rpx);
    box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.12),
      0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  }
}

.date-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f0f0f0;
  margin-bottom: 30rpx;

  .date {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  padding: 10rpx 0;
}

.metric-card {
  background: linear-gradient(145deg, #ffffff, #f5f5f5);
  padding: 20rpx;
  border-radius: 16rpx;
  text-align: center;
  box-shadow: 8rpx 8rpx 16rpx #e6e6e6, -8rpx -8rpx 16rpx #ffffff;

  .metric-label {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 10rpx;
  }

  .metric-value {
    display: flex;
    justify-content: center;
    align-items: baseline;

    .number {
      font-size: 40rpx;
      font-weight: 600;
      color: #000;
      line-height: 1;
    }

    .unit {
      font-size: 24rpx;
      color: #999;
      margin-left: 4rpx;
    }
  }
}

.content-wrapper {
  padding-bottom: 180rpx; // 为底部按钮留出空间
}

.bottom-button-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f5f5f5;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom); // 适配全面屏
}

.chart-area {
  margin: 30rpx;
  padding: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 40rpx;
  
  // 过渡动画
  opacity: 0;
  transform: translateY(50rpx);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  &.chart-show {
    opacity: 1;
    transform: translateY(0);
  }

  .chart-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 30rpx;
    letter-spacing: 1rpx;
  }

  .charts {
    width: 100%;
    height: 600rpx;
  }
}

// 修改底部按钮样式，确保在固定位置显示正常
.add,
.choose {
  padding: 30rpx;
  background: #000;
  color: #fff;
  border-radius: 16rpx;
  font-weight: 500;
  letter-spacing: 2rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  position: relative; // 确保按钮显示在最上层
  z-index: 101;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
  }

  &.disabled {
    background: #999;
    box-shadow: none;
  }
}

// 修改checkbox样式
/deep/ uni-checkbox .uni-checkbox-input {
  border-radius: 50%;
  border-color: #000;

  &.uni-checkbox-input-checked {
    background-color: #000;
    border-color: #000;
  }
}

// 选中状态的卡片样式
.order-item.selected {
  border: 2rpx solid #000;
  background: linear-gradient(145deg, #ffffff, #fafafa);
}
</style>
